
<template>
  <el-button-group>
    <template v-for="item in buttonGroupOptions">
      <el-button v-if="!item.visible"
        :key="item.value"
        :type="item.value === modelValue ? item.selectType : item.type"
        :size="size"
        :round="item.corner"
        :disabled="allDisabled ? true : item.disable"
        @click="handleClick(item)">
        {{ item.label }}
        <template #icon
          v-if="item.icon">
          <VfIcon :name="item.icon" />
        </template>
      </el-button>
    </template>
  </el-button-group>
</template>

<script setup>
import { computed, ref, watch } from 'vue';

const props = defineProps({
  // 数据项配置
  'options': {
    type: [Array], default: []
  },
  // 即时信息
  'modelValue': {},
  // 是否立即执行change事件
  'immediate': { type: Boolean, default: false },
  //按钮是否禁用
  allDisabled: {
    type: Boolean, default: false
  },
  //按钮是否禁用 
  size: {
    type: String, default: ''
  },
});
const emits = defineEmits(['update:modelValue', 'update:modelLabel', 'change']);
const buttonGroupOptions = computed(() => {
  const { options } = props;
  return options
});
const handleClick = function (item) {
  checkedItem.value = item
  emits('update:modelLabel', item.label);
  emits('update:modelValue', item.value);
};
const getTargetItem = (targetValue) => {
  return buttonGroupOptions.value.filter(item => item.value === targetValue)[0]
}
const checkedItem = ref(getTargetItem(props.modelValue))
watch(checkedItem, (newValue) => {
  if (newValue) { emits('change', newValue) }
}, { deep: true, immediate: props.immediate })
</script>

<style lang="scss" scoped></style>
